<template>
  <div class="message-list">
    <el-scrollbar>
      <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item v-for="(message, index) in messages" :key="index" :index="index.toString()">
          <span>{{ message.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  messages: Array,
  activeIndex: String
})

const emit = defineEmits(['select'])

const handleSelect = (index) => {
  emit('select', index)
}
</script>

<style scoped>
.message-list {
  width: 200px;
  height: 100%;
  border-right: 1px solid #e4e7ed;
}

.el-menu {
  border-right: none;
}
</style>